{% extends 'base.html' %}
{% block title %} 主页 {% endblock %}
{% block body %}
<div class="ui centered column">
	<h4 class="ui block top attached header">
		<i class="clock alternate outline icon"> </i>
		<div class="content"> 当前时间 </div>
	</h4>
	<div class="ui bottom attached center aligned segment" style="font-size: 12px;">
		<div style="margin-top: 2px">
			<span id="nowtime-month" style="font-size: 18px"></span> 月
			<span id="nowtime-date" style="font-size: 18px"></span> 日
		</div>
		<div style="margin-top: 10px; font-size: 20px">
			<span id="nowtime-hours" style="font-size: 30px"></span> :
			<span id="nowtime-minutes" style="font-size: 30px"></span> :
			<span id="nowtime-seconds" style="font-size: 30px"></span>
		</div>
		<script>
			function UpdateNowtime(){
				function ToFixedLength(x){ return x < 10 ? "0"+x : x; }
				var date = new Date();
				$("#nowtime-month").text(date.getMonth()+1)
				$("#nowtime-date").text(date.getDate())
				$("#nowtime-hours").text(ToFixedLength(date.getHours()))
				$("#nowtime-minutes").text(ToFixedLength(date.getMinutes()))
				$("#nowtime-seconds").text(ToFixedLength(date.getSeconds()))
			}
			function UpdateNowtimeD(){
				UpdateNowtime();
				setInterval(function(){UpdateNowtimeD()},1000)
			}
			UpdateNowtimeD()
		</script>
	</div>

	<h4 class="ui block top attached header">
		<i class="quote left icon"> </i>
		<div class="content" style="width: 100%;"> <div style="width: 100%; display: flex; justify-content: space-between"> 一言 <i id="hitokoto-refresh" style="opacity: 0.3; position: relative; left: 12" class="refresh icon"></i> </div> </div>
	</h4>
	<div class="ui bottom attached center aligned segment">
		<div id="hitokoto-content" style=""></div>
		<div id="hitokoto-from" style=""></div>
	</div>
	<script>
		function RefreshHitokoto(){
			$.get('https://v1.hitokoto.cn/?encode=json',function(data){
				$('#hitokoto-content').text(data.hitokoto);
				if(data.from)
					$('#hitokoto-from').text('—— ' + data.from);
			})
		}
		RefreshHitokoto()
		$("#hitokoto-refresh").click(function(){RefreshHitokoto()})
	</script>

	<h4 class="ui block top attached header">
		<i class="calendar alternate outline icon"> </i>
		<div class="content"> 距离高考还有 </div>
	</h4>
	<div class="ui bottom attached center aligned segment" style="font-size: 12px;">
		<div style="margin-top: 6px">
			<span id="countdown-days" style="font-size: 30px"></span> 天
		</div>
		<div style="margin-top: 6px;">
			<span id="countdown-hours" style="font-size: 18px"></span> 小时
			<span id="countdown-minutes" style="font-size: 18px"></span> 分钟
			<span id="countdown-seconds" style="font-size: 18px"></span> 秒
		</div>
		<script>
			function UpdateCountdown(){
				var endDate = new Date('Mon Jun 07 2021 09:00:00 GMT+0800 (中国标准时间)')
				var startDate = new Date();
				var duration = endDate - startDate;
				var daysLeft = Math.floor( duration / (1000*60*60*24) );
				var hoursLeft = Math.floor( duration % (1000*60*60*24) / (1000*60*60) );
				var minutesLeft = Math.floor( duration % (1000*60*60) / (1000*60) );
				var secondLeft = Math.floor( duration % (1000*60) / (1000) );
				var countdownString = String(daysLeft)
				$("#countdown-days").text(daysLeft)
				$("#countdown-hours").text(hoursLeft)
				$("#countdown-minutes").text(minutesLeft)
				$("#countdown-seconds").text(secondLeft)
			}
			function UpdateCountdownD(){
				UpdateCountdown();
				setInterval(function(){UpdateCountdownD()},1000)
			}
			setInterval(function(){UpdateCountdownD()},10)
		</script>
	</div>
</div>
{% endblock %}
